<template>
	<!-- <router-link to="/materials">跳转到素材页面</router-link><br> -->
	<!-- <router-link to="/follow">跳转到关注页面</router-link> -->
	<br><br><br>
	<!-- 创建画板页面 -->
	<template class="add2" v-if="is.box">
		<creaddraw></creaddraw>
	</template>

	<!-- 上面为添加画板部分////////////////////////////////////////////////////////////// -->
	<div class="fa-box">
		<!-- 顶部部分 -->
		<div class="fa">
			<div class="left">
				<div class="one">
					<img src="../../public/img/t-13.webp" alt="" class="img">
					<div class="one-one">
						<div class="name">{{userinfo.nickname}}</div>
						<div class="one-foot">2粉丝*{{userinfo.guanzhu}}关注</div>
					</div>
				</div>
				<div class="con">设计师</div>
				<div class="middle">
					<div class="one">平面设计师</div>
					<div class="one">|</div>
					<div class="one">IP属地:四川</div>
					<div class="one">|</div>
					<div class="one">豆</div>
				</div>
				<!-- 跳转到个人信息修改页面 -->
				<div class="updata">
					<router-link to="/setting" class="up-left thr">编辑个人信息</router-link>
					<div class="share thr">分享</div>
				</div>
			</div>
		</div>
		<div class="foot">
			<div class="ftop">
				<div class="fone">
					<a href="" title="画板:1">画板 1</a>
					<a href="" title="采集:3">采集 3</a>
					<a href="" title="喜欢:3">喜欢 3</a>
					<a href="" title="标签:2">标签 2</a>
					<a href="" title="回收站:1">回收站 1</a>
				</div>

				<!-- 右边:拖拽排序\标准模式\去桌面端管理\搜索 -->
				<div class="ftwo">
					<div class="fo-one">
						排序方式
						<div class="foot-fa">
							<div class="foot-one">拖拽排序</div>
							<div class="foot-one">A-Z排序</div>
							<div class="foot-one">最近更新</div>
							<div class="foot-one">时间升序</div>
							<div class="foot-one">时间降序</div>
						</div>
					</div>

					<div class="fo-two">模式选择
						<div class="two-fa">
							<div class="foot-two">标准模式</div>
							<div class="foot-two">紧凑模式</div>
						</div>
					</div>
					<div class="control">去桌面端管理</div>
					<div class="select">搜索</div>


				</div>
			</div>
			<div class="all">
				<div class="one-box">
					<div class="one one1">全部</div>
					<div class="one one2">+新建专辑</div>
				</div>

			</div>
			<!-- 创建画板部分 -->
			<div class="buttonm">
				<div class="bone bone1" @click="clicked(add2)">
					<div class="son">
						<div class="add">+</div>
						<div class="creat">创建画板</div>
					</div>

				</div>
				<div class="bone bone2">
					<div class="btwo"><img src="../../public/img/t-01.webp" alt=""></div>
					<div class="bfoot">
						<div class="tu"><img src="../../public/img/t-02.webp" alt="11"></div>
						<div class="tu"><img src="../../public/img/t-04.webp" alt="22"></div>
						<div class="tu"><img src="../../public/img/t-05.webp" alt="33"></div>
					</div>
				</div>
				<div class="bone bone2">
					<div class="btwo"><img src="../../public/img/t-06.webp" alt=""></div>
					<div class="bfoot">
						<div class="tu"><img src="../../public/img/t-07.webp" alt="11"></div>
						<div class="tu"><img src="../../public/img/t-08.webp" alt="22"></div>
						<div class="tu"><img src="../../public/img/t-09.webp" alt="33"></div>
					</div>
				</div>
				<div class="bone bone2">
					<div class="btwo"><img src="../../public/img/t-10.webp" alt=""></div>
					<div class="bfoot">
						<div class="tu"><img src="../../public/img/t-11.webp" alt="11"></div>
						<div class="tu"><img src="../../public/img/t-12.webp" alt="22"></div>
						<div class="tu"><img src="../../public/img/t-07.webp" alt="33"></div>
					</div>
				</div>
				<div class="bone bone2">
					<div class="btwo"><img src="../../public/img/t-05.webp" alt=""></div>
					<div class="bfoot">
						<div class="tu"><img src="../../public/img/t-04.webp" alt="11"></div>
						<div class="tu"><img src="../../public/img/t-04.webp" alt="22"></div>
						<div class="tu"><img src="../../public/img/t-05.webp" alt="33"></div>
					</div>
				</div>
				<div class="bone bone2">
					<div class="btwo"><img src="../../public/img/t-09.webp" alt=""></div>
					<div class="bfoot">
						<div class="tu"><img src="../../public/img/t-06.webp" alt="11"></div>
						<div class="tu"><img src="../../public/img/t-08.webp" alt="22"></div>
						<div class="tu"><img src="../../public/img/t-06.webp" alt="33"></div>
					</div>
				</div>
			</div>
		</div>

	</div>

</template>
<script setup>
	// 获取用户昵称、账号
	import { onMounted, ref, getCurrentInstance, reactive } from 'vue';
	import creaddraw from '../componens/thh/user/adddraw.vue'
	// 是否显示添加画板这个组件
	let is = reactive({
		box: false
	})
	function clicked(arg) {
		if (arg === 'add2') {
			is.box = 'true'
			console.log(222222, is.box);
		}
		else {
			is.box = 'false';
			console.log(3333, is.box);
		}

	}




	let { proxy } = getCurrentInstance()
	let userinfo = ref('')
	let load = async (count = 0, flag = 0, uid = 1) => {
		let res = await proxy.$axios('/egg/getuserinfo', { params: { count, uid } })
		// 获取用户的数据
		userinfo = res.data
		console.log(userinfo)
	}
	onMounted(() => {
		load()

	})



</script>

<style lang="scss" scoped>
	.fa-box {
		margin: 0 auto;

		.fa {
			width: 1560px;
			height: 268px;
			display: flex;
			justify-content: space-between;
			margin: 0 auto;

			.left {
				width: 676px;
				height: 268px;

				/* 上边部分 */
				.one {
					width: 676px;
					height: 80px;
					display: flex;


					/*  用户头像 */
					.img {
						width: 75px;
						height: 75px;
						border-radius: 50%;
						line-height: 80px;
						margin-right: 5px;
					}

					/* 用户名和粉丝关注部分 */
					.one-one {
						width: 215px;
						height: 80px;


						.name {
							width: 215px;
							height: 42px;
							font-size: 28px;
							line-height: 42px;
							margin-top: 5px;
							font-weight: 900;

						}

						/* 0粉丝+0关注 */
						.one-foot {
							width: 215px;
							height: 20px;
							font-size: 14px;
							letter-spacing: 3px;
							margin: 3px 0;
							font-weight: 700;
						}
					}
				}



				/* 用户设计部分 平面实际上|IP属地:四川 豆 */
				.con {
					color: rgb(154, 173, 207);
				}

				.middle {
					width: 676px;
					height: 20px;
					color: rgb(154, 173, 207);
					display: flex;

					.one {
						width: auto;
						height: 20px;
						margin: 0px 10px 0px 0px;

					}
				}

				.updata {
					width: 445px;
					height: 40px;
					margin-top: 7px;
					display: flex;

					a {
						color: black;
					}

					.up-left {
						width: 118px;
						height: 40px;
					}

					.share {
						width: 62px;
						height: 40px;

						&:hover {
							background-color: rgb(204, 242, 229);

						}
					}



				}

				.thr {
					font-weight: 900;
					margin: 0px 15px 0px 0px;
					line-height: 40px;
					text-align: center;
					border: 1px solid rgb(154, 154, 156);
					border-radius: 15px;
				}




			}

		}

		.foot {
			width: 1560px;
			height: 678px;
			margin: 0 auto;

			.ftop {
				width: 1560px;
				height: 40px;
				display: flex;
				justify-content: space-between;

				/* // 画板、采集、喜欢、标签、回收站 */
				.fone {
					width: 351px;
					height: 40px;
					line-height: 40px;

					a {
						width: auto;
						height: 24px;
						font-weight: 900;
						margin: 0px 22px 0px 0px;

						&:hover {
							color: black;
						}
					}

				}

				.ftwo {
					width: 360px;
					height: 40px;
					line-height: 40px;
					display: flex;
					justify-content: space-around;

					/* // 排序方式 */
					.fo-one {
						width: 88px;
						height: 32px;
						text-align: center;
						line-height: 32px;
						margin-top: 5px;
						position: relative;
						z-index: 10000;

						/* // 下拉框 */
						.foot-fa {
							width: 130px;
							height: 216px;
							margin-left: -20px;
							border-radius: 15px;
							display: none;
							border: 1px solid rgb(237, 242, 245);
							background-color: white;


							.foot-one {
								width: 120px;
								height: 35px;
								margin-top: 6px;
								margin-left: 3px;
								text-align: center;
								border-radius: 10px;

								&:hover {
									background-color: rgb(237, 242, 245);
								}
							}
						}

					}

					.fo-one:hover {
						background-color: rgb(224, 229, 234);
					}



					.fo-one:hover .foot-fa {
						display: block;
					}

					/* 模式选择 */
					.fo-two {
						width: 88px;
						height: 32px;
						text-align: center;
						line-height: 32px;
						margin-top: 5px;
						position: relative;
						z-index: 10000;

						/* // 下拉框  */
						.two-fa {
							width: 130px;
							height: 96px;
							border: 1px solid rgb(237, 242, 245);
							background-color: white;
							border-radius: 15px;
							margin-left: -13px;

							display: none;

							.foot-two {
								width: 120px;
								height: 35px;
								margin-left: 4px;
								margin-top: 5px;
								border-radius: 10px;

								&:hover {
									background-color: rgb(237, 242, 245);
								}
							}
						}
					}

					.fo-two:hover .two-fa {
						display: block;
					}


				}

				.control {
					width: 106px;
					height: 32px;
					border: 1px solid black;
					text-align: center;
					margin-top: 5px;
					line-height: 32px;
					border: 1px solid rgb(232, 232, 233);
					border-radius: 15px;

					&:hover {
						background-color: rgb(237, 242, 245);
					}
				}

				.select {
					width: 66px;
					height: 32px;
					background-color: rgb(237, 242, 245);
					text-align: center;
					margin-top: 5px;
					line-height: 32px;
					border-radius: 15px;

					&:hover {
						background-color: rgb(228, 233, 237);
					}

				}


			}

			.all {
				width: 1560px;
				height: 56px;
				font-size: 14px;

				.one-box {
					width: 160px;
					height: 56px;

					display: flex;
					line-height: 56px;
					justify-content: space-between;
				}

				.one {
					font-weight: 900;
				}

				.one1 {
					width: 52px;
					height: 32px;
					background-color: rgb(28, 31, 35);
					color: white;
					text-align: center;
					line-height: 32px;
					margin-top: 10px;
					border-radius: 15px;

					&:hover {
						cursor: pointer;

					}


				}

				.one2 {
					width: 102px;
					height: 32px;
					border: 1px solid rgb(198, 198, 198);
					text-align: center;
					line-height: 32px;
					margin-top: 10px;
					border-radius: 10px;

					&:hover {
						cursor: pointer;
						background-color: rgb(237, 242, 245);
					}
				}

			}

		}

		/* 画板部分 */
		.buttonm {
			width: 1608px;
			height: 343px;
			border: 1px solid rgb(189, 188, 188);
			display: flex;
			justify-content: space-around;


			.bone {
				width: 240px;
				height: 240px;
				margin: 0 10px 0px 0px;
			}

			.bone1 {
				text-align: center;
				border: 5px dashed rgb(228, 229, 230);

				&:hover {
					cursor: pointer;
					background-color: rgb(228, 229, 230);
				}

				.son {
					width: 100px;
					height: 100px;
					position: relative;

					.add {
						width: 20px;
						height: 20px;
						background-color: aquamarine;
						position: absolute;
						top: 60px;
						left: 100px;
						border-radius: 15px;
						text-align: center;
						line-height: 20px;
						background-color: rgb(138, 142, 145);
						color: white;
					}

					.creat {
						width: 100px;
						height: 50px;
						position: absolute;
						margin-top: 10px;
						top: 80px;
						left: 65px;
					}
				}
			}

			.bone2 {
				.btwo {
					width: 240px;
					height: 160px;
					background-color: rgb(232, 237, 240);
					border-top-left-radius: 15px;
					border-top-right-radius: 15px;

					img {
						width: 100%;
						height: 100%;
					}

				}

				.bfoot {
					width: 240px;
					height: 78px;
					margin-top: 1px;
					display: flex;
					justify-content: space-between;
					text-align: center;
					line-height: 78px;

					.tu {
						width: 78.66px;
						height: 78px;
						background-color: rgb(232, 237, 240);

						img {
							width: 78.66px;
							height: 78px;
						}

					}
				}
			}
		}



	}
</style>